<template>
  <div class="jf_index">
    <router-view></router-view>
    <!-- 底部导航 -->
    <div class="nav  row-between-center">
      <router-link tag="div" to="home">
        <div class="icon_home" :class="[{active:$route.path.search('home')> -1}]"></div>
        <p class="text" :class="[{active:$route.path.search('home')> -1}]">首页</p>
      </router-link>
      <router-link tag="div" to="order" class="item">
        <div class="icon_notice" :class="[{active:$route.path.search('order')> -1}]"></div>
        <p class="text" :class="[{active:$route.path.search('order')> -1}]">订单</p>
      </router-link>
      <router-link tag="div" to="my" class="item">
        <div class="icon_me" :class="[{active:$route.path.search('my')> -1}]"></div>
        <p class="text" :class="[{active:$route.path.search('home')> -1}]">我的</p>
      </router-link>
    </div>
  </div>
</template>

<script>
import api from 'api/api'
export default {
  created () {
    console.log('home')
    this.visirted()
  },
  methods: {
    visirted () {
      console.log(this.$route.query.share)
      if (this.$route.query.share) {
        api.sharecallback({
          data: this.$route.query.share
        }).then(res => {

        })
      }
    }
  }
}

</script>

<style lang="scss">
.jf_index {
  .nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.17rem 0.81rem 0.31rem 0.81rem;
    font-size: 0.2rem;
    background-color: #fff;
    border-top: 1px solid rgba(229, 229, 229, 1);
    .text {
      margin-top: 0.1rem;
    }
    .icon_home {
      width: 0.42rem;
      height: 0.42rem;
      background: url("../assets/img/home/home1.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: bottom;
      &.active {
        background-image: url("../assets/img/home/home.png");
      }
    }
    .icon_notice {
      width: 0.42rem;
      height: 0.42rem;
      background: url("../assets/img/home/message2.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: bottom;
      &.active {
        background-image: url("../assets/img/home/message.png");
      }
    }
    .icon_me {
      width: 0.42rem;
      height: 0.42rem;
      background: url("../assets/img/home/my2.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: bottom;
      &.active {
        background-image: url("../assets/img/home/my.png");
      }
    }
  }
}
</style>